<template>
	<view class="Registration">
		<view class="header">
			<view class="logo">
				<!-- <img :src="resBaseUrl+'Registration/logo.png'" alt="" /> -->
				<image mode="aspectFit" :src="resBaseUrl + 'Registration/logo.png'" alt="" />
			</view>
			<view class="name">
				<image mode="aspectFit" :src="resBaseUrl + 'Registration/logoname.png'" alt="" />
			</view>
		</view>
		<view class="form">

			<view class="username">
				<view> <text>*</text>账号/手机号: </view>
				<input v-model="userLoginId" type="text" placeholder="请输入账号/手机号" />
			</view>
			<view style="position: relative;">
				<view> <text>*</text>密码: </view>
				<input v-model="userPassword" class="input" :type="!passwordType ? 'password' : 'text'" placeholder="请输入密码" />
				<image mode="aspectFit" style="z-index: 999;position: absolute;width: 52rpx;right: 20rpx;"
					@tap="passwordType = !passwordType" :src="resBaseUrl + (passwordType ? 'login/see.png' : 'login/nosee.png')">
				</image>
			</view>
			<view style="position: relative;">
				<view> <text>*</text>确认密码: </view>
				<input v-model="userRePassword" class="input" :type="!passwordType1 ? 'password' : 'text'"
					placeholder="请确认密码" />
				<image mode="aspectFit" style="z-index: 999;position: absolute;width: 52rpx;right: 20rpx;"
					@tap="passwordType1 = !passwordType1"
					:src="resBaseUrl + (passwordType1 ? 'login/see.png' : 'login/nosee.png')"></image>
			</view>
			<view class="username">
                <view> <text>*</text>公司简称: </view>
                <input v-model="uname" type="text" placeholder="请输入公司简称" />
            </view>
			<!-- view>
				<view> <text>*</text>手机号: </view>
				<input v-model="userTel" type="text" placeholder="请输入手机号" />
			</view> -->
			<!-- <view>
				<view>
					邮箱:
				</view>
				<input v-model="userEmail" type="text" placeholder="请输入邮箱">
			</view> -->
		</view>
		<view class="btn">
			<view @tap="logon">注&emsp;册</view>
		</view>
		<view @tap="login" class="logon"> 已有账号&emsp;&gt; </view>
		<view class="footer"> 联系开通:13395762277 </view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userEmail: "",
			userLoginId: "",
			userPassword: "",
			passwordType: false,
			passwordType1: false,
			userRePassword: "",
			userTel: "",
			uname: "",
		};
	},
	methods: {
		// 注册
		logon() {
			var userTelReg = /^1[3-9]\d{9}$/;
			if (this.uname == "") {
				uni.showToast({
					title: "请填写公司简称",
					icon: "none",
				});
			} else if (this.userLoginId == "") {
				uni.showToast({
					title: "请填写电话",
					icon: "none",
				});
			} else if (this.userPassword == "") {
				uni.showToast({
					title: "请填写密码",
					icon: "none",
				});
			} else if (this.userPassword !== this.userRePassword) {
				uni.showToast({
					title: "两次密码不一致",
					icon: "none",
				});
			} else {
				this.$api
					.registrationApi({
						userLoginId: this.userLoginId,
						userPassword: this.userPassword,
						uname: this.uname,
					})
					.then((res) => {
						// console.log(res);
						if (res.code == 200) {
							if (res.message) {
								uni.showToast({
									title: res.message,
									icon: "none",
								});
							}

							uni.navigateTo({
								url: "/pages/login/index",
							});
						} else {
							if (res.message) {
								uni.showToast({
									title: res.message,
									icon: "none",
								});
							}
						}
					});
			}
		},
		// 前往登录
		login() {
			uni.navigateTo({
				url: "/pages/login/index",
			});
		},
	},
};
</script>

<style lang="scss" scoped>
page {
	background: #fff;
}

.Registration {
	background: #fff;
	height: 100vh;

	.header {
		text-align: center;
		position: relative;

		.logo {
			padding-top: 42rpx;
			margin-bottom: 54rpx;

			image {
				width: 66rpx;
				height: 82rpx;
			}
		}

		.name {
			image {
				width: 216rpx;
				height: 36rpx;
			}
		}
	}

	.form {
		// background-color: #dac;
		padding: 50rpx 25rpx;
		box-sizing: border-box;
		// text-indent: 1em;
		// background-color: #fac;

		&>view {
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;

			view {
				width: 200rpx;
				// background-color: #fac;
				text-align: right;
				margin-left: 0;

				text {
					color: #fe3430;
				}
			}
		}

		&>view:last-child {
			margin-bottom: 0;
		}

		input,
		.input {
			font-family: "SimSun", "sans-serif" !important;
			font-size: 32rpx;
			outline: medium !important;
			flex: 1;
			border: 0 !important;
			// margin-top: 20rpx;
			background-color: #f2f2f2;
			height: 94rpx;
			border-radius: 48rpx;
			text-indent: 1em;
			margin-left: 20rpx;
		}
	}

	.btn {
		// margin-top: 40rpx;

		view {
			background-image: url("/static/images/login/button.png");
			background-size: 390rpx 124rpx;
			width: 390rpx;
			height: 124rpx;
			line-height: 100rpx;
			color: #fff;
			text-align: center;
			margin: auto;
		}
	}

	.logon {
		text-align: center;
		height: 16rpx;
		font-size: 30rpx;
		color: #a2a2a2;
		margin-top: 42rpx;
	}

	.footer {
		text-align: center;
		font-size: 24rpx;
		font-weight: 600;
		color: #fe3430;
		margin-top: 64rpx;
		padding-bottom: 18rpx;
	}
}
</style>
